<template>
  <view>
  <view class="group2 flex-row">
      <image
        class="image3"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pso555a8mpcnheibp8n5zp9vtrx6z8pqf87b2b1c09-c020-4d51-9c0f-92a6ab2602b1" @click="back"
      />
      <text class="text1">添加签署</text>
    </view>
    <view class="page">
      <view class="box_3">
        <view class="text-wrapper_1">
          <text lines="1" class="text_2" @click="isPerson=true">个人</text>
          <text lines="1" class="text_3" @click="isPerson=false">企业</text>
        </view>

        <view v-show="isPerson">
          <view class="box_4"></view>
          <view class="box_5">
            <view class="text-wrapper_2">
              <text lines="1" class="text_6">姓名：
              </text>
              <input type="text" class="input" v-model="person.name" />
              <text lines="1" class="text_5" v-show="!person.name">请输入姓名</text>
            </view>
            <view class="section_2"></view>
            <view class="text-wrapper_3">
              <text lines="1" class="text_6">联系方式：</text>
              <input type="text" class="input" v-model="person.phone" />
              <text lines="1" class="text_7" v-show="!person.phone">请输入手机号</text>
            </view>
            <view class="section_3"></view>
            <view class="text-wrapper_4">
              <text lines="1" class="text_8">身份证号：</text>
              <input type="text" class="input" v-model="person.identity" />
              <text lines="1" class="text_9" v-show="!person.identity">请输入身份证号</text>
            </view>
          </view>
        </view>

        <view v-show="!isPerson">
          <view class="group_1"></view>
          <view class="group_2">
            <view class="text-wrapper_3">
              <text lines="1" class="text_6">接收账号：</text>
              <input type="text" class="input" v-model="firm.mailbox" />
              <text lines="1" class="text_5" v-show="!firm.mailbox">请输入邮箱</text>
            </view>
            <view class="section_1"></view>
            <view class="text-wrapper_3">
              <text lines="1" class="text_6">公司名称：</text>
              <input type="text" class="input" v-model="firm.name" />
              <text lines="1" class="text_7" v-show="!firm.name">请输入公司名称</text>
            </view>
          </view>
        </view>

        <view class="text-wrapper_5">
          <text class="text_10" @click="toInitiate()">确&nbsp;&nbsp;认</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {checkMobile,identityCard,emailAddress} from '@/common/util/verify.js'
  export default {
    data() {
      return {
        isPerson: true,
        //个人
        person: {
          name: '', //名字
          phone: '', //联系电话
          identity: '' //身份证
        },
        //企业
        firm: {
          mailbox: '', //邮箱
          name: '' //公司名称
        }
      }
    },
    methods: {
      back(){
        uni.redirectTo({
          url:'../twoDetil/twoDetil'
        })
      },
      //确认按钮发起签署
      async toInitiate() {
        
        if (this.isPerson) {
          let sj=await checkMobile(this.person.phone)//校验手机号
          let sfz=await identityCard(this.person.identity)//校验身份证
          if(!sj&&!sfz){
            let title='手机号或身份证错误!'
            uni.$showMsg(title)
          }else{
            //整理参数
            let param={
              userType:1,
              name:this.person.name,
              phone:this.person.phone,
              cardCode:this.person.identity
            }
            
            let res = await this.$http('/app/v1/contract/getSignUserData','get',param)
            console.log(res)
            if(res.data.code==200){
              let signUserList = uni.getStorageSync('signUserList');
              signUserList.push(res.data.data)
               uni.setStorageSync('signUserList',signUserList)
              let title='添加成功'
              uni.$showMsg(title)
              uni.navigateTo({
                url: '/subpkg/twoDetil/twoDetil'
              })
            }else{
              let title = '添加失败'
              uni.$showMsg(title)
            }
            
           
            
          }
        } else {
          let yx=await emailAddress(this.firm.mailbox)//校验电子邮箱
          if(!yx){
            let title='邮箱错误!'
            uni.$showMsg(title)
          }else{
            
            
            let param={
              userType:2,
              companyName:this.firm.name,
              companyEmail:this.firm.mailbox,
              
            }
            
              // await this.$store.dispatch('contract/addSignUserData',param)
              let res = await this.$http('/app/v1/contract/getSignUserData','get',param)
              if(res.data.code==200){
                let signUserList = uni.getStorageSync('signUserList');
                signUserList.push(res.data.data)
                 uni.setStorageSync('signUserList',signUserList)
                let title='添加成功'
                uni.$showMsg(title)
                uni.navigateTo({
                  url: '/subpkg/twoDetil/twoDetil'
                })
              }else{
                let title = '添加失败'
                uni.$showMsg(title)
              }
            
          }
          
        }
      }
    }
  }
</script>

<style >
  .group2 {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps5isyyq2potdfiptqwd466gus5r8c3u9gdbda77b7-1a54-4592-a767-12fcab94e2b4)
      100% no-repeat;
    background-size: 100% 100%;
  }
  
  .image3 {
    width: 20rpx;
    height: 35rpx;
    margin: 35rpx 0 0 31rpx;
  }
  
  .text1 {
    width: 148rpx;
    height: 34rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 37rpx 301rpx 0 250rpx;
  }

  .group_1 {
    background-color: rgba(205, 173, 102, 1.000000);
    border-radius: 2rpx;
    width: 130rpx;
    height: 4rpx;
    /* display: flex; */
    /* flex-direction: column; */
    margin: 37rpx 0 0 413rpx;
  }

  .group_2 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 20rpx;
    width: 690rpx;
    height: 222rpx;
    border: 2px solid rgba(230, 215, 178, 1);
    /* display: flex; */
    /* flex-direction: column; */
    margin: 27rpx 0 0 30rpx;
  }



  .text_4 {
    width: 121rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .text_5 {
    
    width: 118rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 3rpx;
    opacity: 0.5;
  }

  .section_1 {
    background-color: rgba(230, 230, 230, 1.000000);
    width: 630rpx;
    height: 2rpx;
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: 120rpx;
    margin-left: 30rpx;
  }

  .text-wrapper_3 {
    width: 571rpx;
    height: 26rpx;
    /* flex-direction: row; */
    display: flex;
    /* justify-content: space-between; */
    margin: 47rpx 0 48rpx 60rpx;
  }

  .text_6 {
    width: 121rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .text_7 {
    width: 167rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 2rpx;
    opacity: 0.5;
  }

  .input {
    margin-top: 12rpx;
    /* margin-left: 18rpx; */
  }

  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1390rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .box_1 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 750rpx;
    height: 56rpx;
    flex-direction: row;
    display: flex;
    justify-content: flex-center;
  }

  .label_1 {
    width: 40rpx;
    height: 24rpx;
    margin: 24rpx 0 0 30rpx;
  }

  .label_2 {
    width: 38rpx;
    height: 24rpx;
    margin: 24rpx 0 0 16rpx;
  }

  .image_1 {
    width: 110rpx;
    height: 24rpx;
    margin: 24rpx 0 0 187rpx;
  }

  .image_2 {
    width: 60rpx;
    height: 20rpx;
    margin: 24rpx 0 0 181rpx;
  }

  .section_1 {
    width: 43rpx;
    height: 20rpx;
    background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/6e308003b6714346954cddf002aafa09_mergeImage.png) 100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 24rpx 30rpx 0 15rpx;
  }

  .box_2 {
    width: 750rpx;
    height: 88rpx;
    background-size: 100% 100%;
    flex-direction: row;
    display: flex;
  }

  .image_3 {
    width: 20rpx;
    height: 35rpx;
    margin: 35rpx 0 0 31rpx;
  }

  .text_1 {
    width: 184rpx;
    height: 34rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 37rpx 282rpx 0 233rpx;
  }

  .box_3 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 750rpx;
    height: 1390rpx;
    display: flex;
    flex-direction: column;
  }

  .text-wrapper_1 {
    width: 282rpx;
    height: 31rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 46rpx 0 0 225rpx;
  }

  .text_2 {
    width: 58rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 3rpx;
  }

  .text_3 {
    width: 57rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .box_4 {
    background-color: rgba(205, 173, 102, 1.000000);
    border-radius: 2rpx;
    width: 130rpx;
    height: 4rpx;
    display: flex;
    flex-direction: column;
    margin: 37rpx 0 0 189rpx;
  }

  .box_5 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 20rpx;
    width: 690rpx;
    height: 322rpx;
    border: 2px solid rgba(230, 215, 178, 1);
    display: flex;
    flex-direction: column;
    margin: 27rpx 0 0 30rpx;
  }

  .text-wrapper_2 {
    width: 519rpx;
    height: 27rpx;
    /* flex-direction: row; */
    display: flex;
    /* justify-content: space-between; */
    margin: 49rpx 0 15rpx 62rpx;
  }

  .text_4 {
    width: 64rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .text_5 {
    width: 117rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 3rpx;
    opacity: 0.5;
  }

  .section_2 {
    background-color: rgba(230, 230, 230, 1.000000);
    width: 630rpx;
    height: 2rpx;
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: 115rpx;
    margin-left: 30rpx;
  }

  .text-wrapper_3 {
    width: 547rpx;
    height: 26rpx;
    /* flex-direction: row; */
    display: flex;
    /* justify-content: space-between; */
    margin: 47rpx 0 15rpx 60rpx;
  }

  .text_6 {
    width: 121rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .text_7 {
    width: 143rpx;
    height: 24rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 2rpx;
    opacity: 0.5;
  }

  .section_3 {
    background-color: rgba(230, 230, 230, 1.000000);
    width: 630rpx;
    height: 2rpx;
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: 205rpx;
    margin-left: 30rpx;
  }

  .text-wrapper_4 {
    width: 571rpx;
    height: 27rpx;
    /* flex-direction: row; */
    display: flex;
    /* justify-content: space-between; */
    margin: 48rpx 0 47rpx 60rpx;
  }

  .text_8 {
    width: 119rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
  }

  .text_9 {
    width: 167rpx;
    height: 24rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 24rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 69rpx;
    margin-top: 2rpx;
    opacity: 0.5;
  }

  .text-wrapper_5 {
    background-color: rgba(205, 173, 102, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    flex-direction: column;
    width: 570rpx;
    position: absolute;
    bottom: 20rpx;
    left: 86rpx;
  }

  .text_10 {
    width: 106rpx;
    height: 34rpx;
    webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: SimHei;
    text-align: center;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 26rpx 0 0 233rpx;
  }
</style>
